<template>
    <div class="login">
        <el-card class="el-card">
            <div slot="header" class="el-title">
                <span>通用后台管理系统</span>
            </div>

            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username" >
                    <el-input type="password" v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="el-button-box">
                    <el-button type="primary" @click="login('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { validateName, validatePassword } from '@/utils/validdate.js'
import {  setToken } from '@/utils/tooken'
import { Message } from 'element-ui'
export default {
    name: 'LoginComponent',
    data() {
        
        return {
            token:"",
            ruleForm: {
                password: '',
                username: ''
            },
            rules: {
                username: [
                    { validator: validateName, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        login(ruleForm) {
            this.$refs[ruleForm].validate((v) => {
                if (v) {
                    Message({
                            message: "登录成功",
                            type: 'success'
                        })
                    setToken("MyToken",this.ruleForm.username)
                    // this.service.get('/ping').then(res=>{
                    //     // 如果请求正常，屏幕显示请求响应
                    //     console.log("请求成功",res)

                    // }).catch(err=>{
                    //     console.log("请求失败",err)
                    // })
                    
                } else {
                    console.log('error 认证错误!!')
                }
                this.$router.push('/home')
            })
        }   
    }
}
</script>


<style scoped lang="less">
.login {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #409EFF;

    .el-card {
        width: 450px;
        margin: 200px auto;

        .el-title {
            font-size: 34px;
            text-align: center;
        }



        .el-form-item__content {
            display: flex;
            justify-content: center;
        }
    }
}
</style>